<script setup>
import request from "@/utils/request";
import { nanoid } from "nanoid";
import { ElMessage } from "element-plus";
import router from "@/router";

const formRef = ref();
let userObj = reactive({
  image: "http://localhost:9090/image/820c49bee2084dd8bdcece148dd758b2default_avatar.png",
  name: "用户" + nanoid(8),
  sex: "男",
  role: "",
  account: "",
  password: "",
  telephoneNum: "",
  checkPass: "",
});
const valPass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== userObj.password) {
    callback(new Error("两次输入不同！"));
  } else {
    callback();
  }
};
const valTel = (rule, str, callback) => {
  let regExp = /^[1][3,4,5,7,8][0-9]{9}$/;
  if (regExp.test(str)) {
    return callback();
  }
  callback(new Error("请输入合法的手机号"));
};
const rules = reactive({
  account: [
    {
      required: true,
      min: 5,
      max: 10,
      message: "请输入5-10个字符",
      trigger: "blur",
    },
  ],
  role: [{ required: true, message: "请选择用户身份", trigger: "change" }],
  password: [
    {
      required: true,
      min: 5,
      max: 10,
      message: "请输入5-10位密码",
      trigger: "blur",
    },
  ],
  checkPass: [{ required: true, validator: valPass, trigger: "blur" }],
  telephoneNum: [{ required: true, validator: valTel, trigger: "blur" }],
});
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      console.log(userObj);
      request.post("/user/insertOne", userObj).then((res) => {
        res.code == 0
          ? (ElMessage.success("注册成功"), router.push({ path: "/login" }))
          : ElMessage.error("注册失败");
      });
    }
  });
};
</script>

<template>
  <div class="container">
    <div class="card">
      <img src="@/static/image/logo.png" alt="" />
    </div>
    <div class="box" id="box">
      <el-form
        :model="userObj"
        label-width="100px"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="角色" prop="role">
          <el-select
            v-model="userObj.role"
            placeholder="请选择用户身份"
            style="width: 450px"
          >
            <el-option label="管理员" value="admin"></el-option>
            <el-option label="制造商" value="manufacturer"></el-option>
            <el-option label="传承人" value="inheritor"></el-option>
            <el-option label="普通用户" value="common"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input
            v-model="userObj.account"
            placeholder="请输入汉字、字母、数字或下划线"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="userObj.password"
            type="password"
            autocomplete="off"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            v-model="userObj.checkPass"
            type="password"
            placeholder="请再次输入密码"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="手机号码" prop="telephoneNum"
          ><el-input
            v-model="userObj.telephoneNum"
            placeholder="请填写手机号码"
        /></el-form-item>
        <el-form-item>
          <button
            type="button"
            style="
              width: 350px;
              border: none;
              height: 40px;
              background-color: rgb(182, 220, 245);
              color: #000;
            "
            @click="submitForm(formRef)"
          >
            提交
          </button>
          <!-- <el-button type="primary" @click="submitForm(formRef)" plain
            >保存</el-button
          > -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<style lang="less" scoped>
ul {
  list-style: none;
}

input {
  border: 0;
}

.clear:after {
  content: "";
  display: block;
  clear: both;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  width: 800px;
  margin: 90px auto;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.card {
  img {
    width: 300px;
    height: 300px;
    float: left;
  }
}
.box {
  width: 450px;
} /* 
.box form {
  padding: 15px 0;
}

.box form ul li {
  display: flex;
  height: 40px;
  line-height: 40px;
  margin-bottom: 15px;
}

.box form ul li input {
  border: 1px solid #ddd;
  height: 38px;
  width: 350px;
  padding: 0 10px;
  line-height: 38px;
  box-sizing: border-box;
  outline: none;
}

.box form ul li label {
  display: block;
  width: 120px;
}

.box form ul li label span {
  color: red;
  padding-right: 10px;
}
.box form ul li label p {
  color: red;
  padding-right: 10px;
}
.box form button {
  width: 470px;
  margin-left: 0px;
  border: none;
  height: 40px;
  background-color: green;
  color: #fff;
}

.box form span {
  margin-left: 10px;
  font-size: 8px;
  color: orange;
} */
</style>